<template>
  <div class="app-container">
    <h4>基本信息</h4>
    <el-row style="padding-bottom: 10px">
      <el-button @click="back">返回</el-button>
    </el-row>
    <table class="table table-striped table-condenseda table-bordered" width="100%">
      <tbody>
      <tr>
        <th width="15%">医院名称</th>
        <td width="35%" v-if="hospital.param"><b style="font-size: 14px">{{ hospital.hosname }}</b> / {{ hospital.param.hosptypeString }}</td>
        <th width="15%">医院logo</th>
        <td width="35%">
          <!--<img :src="'data:image/jpeg;base64,'+hospital.logoData" width="80"/>-->
          <img :src="img" width="80"/>
        </td>
      </tr>
      <tr>
        <th>医院编码</th>
        <td>{{ hospital.hoscode }}</td>
        <th>地址</th>
        <td v-if="hospital.param">{{ hospital.param.fullAddress }}</td>
      </tr>
      <tr>
        <th>坐车路线</th>
        <td colspan="3">{{ hospital.route }}</td>
      </tr>
      <tr>
        <th>医院简介</th>
        <td colspan="3">{{ hospital.intro }}</td>
      </tr>
      </tbody>
    </table>

    <h4>预约规则信息</h4>
    <table class="table table-striped table-condenseda table-bordered" width="100%">
      <tbody>
      <tr>
        <th width="15%">预约周期</th>
        <td width="35%">{{ bookingRule.cycle }}天</td>
        <th width="15%">放号时间</th>
        <td width="35%">{{ bookingRule.releaseTime }}</td>
      </tr>
      <tr>
        <th>停挂时间</th>
        <td>{{ bookingRule.stopTime }}</td>
        <th>退号时间</th>
        <td>{{ bookingRule.quitDay == -1 ? '就诊前一工作日' : '就诊当日' }}{{ bookingRule.quitTime }} 前取消</td>
      </tr>
      <tr>
        <th>预约规则</th>
        <td colspan="3">
          <ol>
            <li v-for="item in bookingRule.rule" :key="item">{{ item }}</li>
          </ol>
        </td>
      </tr>
      <br>

      </tbody>
    </table>
  </div>
</template>


<script>
import hosp from "../../api/hosp";

export default {
  name: "show",
  //import引入的组件需要注入到对象中才能使用",
  components: {},
  data() {
    //这里存放数据",
    return {
      hospital: {},//医院信息
      bookingRule: {},//预约信息
      img: null
    };
  },
  //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
  created() {
    //获取路由id
    const id = this.$route.params.id
    //查询医院详情
    this.fetchHospDetail(id)

  },
  //方法集合",
  methods: {
    //根据id查询医院详情
    fetchHospDetail(id) {
      hosp.getHosDetail(id).then(response => {
        this.hospital = response.data.hospital;
        this.img='data:image/jpeg;base64,'+response.data.hospital.logoData;
        this.bookingRule = response.data.bookingRule
      })
    },
    //返回
    back() {
      this.$router.push({path: '/hosp/hosp/list'})
    }
  },
  //监听属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //生命周期 - 创建之前",数据模型未加载,方法未加载,html模板未加载
  beforeCreate() {
  },
  //生命周期 - 挂载之前",html模板未渲染
  beforeMount() {

  },
  //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
  mounted() {

  },

  //生命周期 - 更新之前",数据模型已更新,html模板未更新
  beforeUpdate() {

  },
  //生命周期 - 更新之后",数据模型已更新,html模板已更新
  updated() {

  },
  //生命周期 - 销毁之前",
  beforeDestroy() {

  },
  destroyed() {

  },
  //生命周期 - 销毁完成",
  //如果页面有keep-alive缓存功能，这个函数会触发",
  activated() {

  }
}
</script>

<style scoped>

</style>
